<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="UTF-8">
<title>后台用户中心</title>
<link rel="stylesheet" type="text/css"
	href="../layuiadmin/statics/css/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="../layuiadmin/statics/css/style.css" />
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
<style type="text/css">
element.style {
	top: 0px;
}
</style>
</head>

<body>
	<div id="editFormDiv" style="display: none">
		<form class="layui-form" lay-filter="example" method="post">

			<div class="layui-form-item" style="display: none">
				<label class="layui-form-label">用户编号</label>
				<div class="layui-input-block">
					<input type="text" name="userid" id="userid" lay-verify="title"
						autocomplete="off" readonly class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="username" lay-verify="title"
						autocomplete="off" class="layui-input" id="username">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked=""
						id="nan"> <input type="radio" name="sex" value="女"
						title="女" id="nv">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-block">
					<input type="text" name="tel" autocomplete="off"
						class="layui-input" id="tel">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="email" lay-verify="title"
						autocomplete="off" class="layui-input" id="email">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">出生年月</label>
				<div class="layui-input-block">
					<input type="text" name="birthday" id="date1" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn btn-update" type="button" lay-submit=""
						lay-filter="demo1">立即提交</button>
				</div>
			</div>
		</form>
	</div>


	<div class="header">
		<div class="bar">
			<div class="w1200">
				<span class="l">舒客<font>用户中心</font></span> <span class="r"><a
					href="${pageContext.request.contextPath}/outapi/frontloginout"><i
						class="icon iconfont icon-dianyuan"></i>退出</a></span>

						 <span class="r"><a href="${pageContext.request.contextPath}/index.jsp">
						 <i class="icon iconfont icon-dianyuan"></i>回到首页</a></span>
						 <span class="r"><a href="${pageContext.request.contextPath}/traapi/travelsall">
						 <i class="icon iconfont icon-dianyuan"></i>查看攻略</a></span>

			</div>
		</div>
		<div class="user-info">
			<div class="w1200">
				<div class="user-headface">
					<img src="../layuiadmin/statics/images/user_face.jpg" />
				</div>
				<div class="user-account">
					<p class="tip">你好，${username}</p>
					<p class="account">
						<span>帐户名：${username}</span>
					</p>
				</div>
				<div class="user-modify">
					<a href="#" id="edit">修改资料></a>
				</div>
			</div>
		</div>
	</div>
	<div class="main w1200">
		<div class="left">
			<ul>
				<li><a href="#" class="active" id="ziliao"> <i
						class="icon iconfont icon-lingdang"></i> 个人资料
				</a></li>
				<li><a href="#" id="dongtai"> <i
						class="icon iconfont icon-fangzidichan"></i> 动态
				</a></li>
				<li><a href="#" id="youji"> <i
						class="icon iconfont icon-wenda"></i> 游记
				</a></li>
				<li><a href="#" id="haoyou"> <i
						class="icon iconfont icon-icon--"></i> 好友
				</a></li>
				<li><a href="#" id="dingdan"> <i
						class="icon iconfont icon-pinglun"></i> 我的订单
				</a></li>
				<li><a href="#" id="shiming"> <i
						class="icon iconfont icon-geren"></i> 实名认证
				</a></li>
				<!-- <li><a href="#" id="fdongtai"> <i
						class="icon iconfont icon-jilu"></i> 发布动态
				</a></li> -->
				<li><a href="#" id="fyouji"> <i
						class="icon iconfont icon-jilu"></i> 发布游记
				</a></li>
			</ul>
		</div>
		<div class="right">
			<!--<div class="tap">
				<span>系统消息</span>
			</div> -->
			<div class="container" id="div1">
				<!-- <div class="no-doc">
						<img src="../layuiadmin/statics/images/no_doc.jpg"/>
						<p>您还没有消息哦~</p>
					</div> -->
				<%-- <%@ include file="userlist.jsp" %> --%>
				<iframe src="ziliao.jsp" style="width: 100%; height: 500px;"
					id="frame"></iframe>
			</div>
		</div>
	</div>
	<script src="../layuiadmin/layui/layui.js"></script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		layui.use([ 'form' ], function() {
			$("#edit").click(function() {
				$("#userid").attr("value",${userid});
				$("#username").attr("value",'${username}');
				$("#tel").attr("value",${tel});
				$("#email").attr("value",'${email}');
				$("#date1").attr("value",${birthday});
				if ('${sex}' == "女") {
					$("input[name='sex']:eq(1)").prop("checked",true);
					console.log("aaa");
				} else {
					$("input[name='sex']:eq(0)").prop("checked",true);
				}
				layui.form.render();
				layer.open({
					type : 1,
					title : '修改页',
					shadeClose : true,
					shade : 0.8,
					area : [ '380px', '60%' ],
					content : $("#editFormDiv"), //iframe的url
					success : function(layero, index) {
						layui.form.on('submit(demo1)', function(data) {
							/* layer.alert(JSON.stringify(data.field), {
								title : '最终的提交信息'
							}) */
							//表单中的数据 进行转换，得到一个json格式的字符串
							console.log(JSON.stringify(data.field));
							//ajax请求实现访问控制器
							$.ajax({
								type : "put", //提交方式
								url : "../../userapi/user", ////地址和springmvc中控制器地址一致
								data : JSON.stringify(data.field), //提交给控制器的数据
								contentType : "application/json", //提交给控制的数据 格式
								success : function(cm) {
									console.log(cm.msg);
									layer.msg(cm.msg, {
										time : 2000
									//两秒延迟
									}, function() {
										if (cm.msg == "修改成功") {

											//obj.update(); ?? 理想
											//layer.close(index);;
											 /* parent.layer.closeAll();//关闭所有,简单粗暴
											window.parent.location.reload();//刷新父页面 */ 
											window.open("${pageContext.request.contextPath}/outapi/frontloginout");
										} else if (cm.msg == "修改成功，请重新登录") {
											window.open("${pageContext.request.contextPath}/outapi/frontloginout");
										}

									});

								}
							});

							return false;
						});
					}
				});
			});
		});
		$(function() {
			$("#dongtai").click(function() {
				$("#frame").attr("src", "../../infapi/dongtai/2");
				$("a").removeClass("active");
				$("#dongtai").addClass("active");
			});
			$("#ziliao").click(function() {
				$("#frame").attr("src", "ziliao.jsp");
				$("a").removeClass("active");
				$("#ziliao").addClass("active");
			});
			$("#youji").click(function() {
				$("#frame").attr("src", "../../infapi/travels/1");
				$("a").removeClass("active");
				$("#youji").addClass("active");
			});
			$("#haoyou").click(function() {
				$("#frame").attr("src", "haoyou.jsp");
				$("a").removeClass("active");
				$("#haoyou").addClass("active");
			});
			$("#dingdan").click(function() {
				$("#frame").attr("src", "dingdan.jsp");
				$("a").removeClass("active");
				$("#dingdan").addClass("active");
			});
			$("#shiming").click(function() {
				$("#frame").attr("src", "shiming.jsp");
				$("a").removeClass("active");
				$("#shiming").addClass("active");
			});
			$("#fdongtai").click(function() {
				$("#frame").attr("src", "../../form.jsp");
				$("a").removeClass("active");
				$("#fdongtai").addClass("active");
			});
			$("#fyouji").click(function() {
				$("#frame").attr("src", "../../form.jsp");
				$("a").removeClass("active");
				$("#fyouji").addClass("active");
			});
		})
	</script>
</body>

</html>